<template>
  <!-- Vue3组件中的模板结构可以没有跟标签，例如：div -->
  <h1>我是App组件</h1>
  <hr>
  <!-- 定义一个自定义事件@hello -->
  <Demo msg="我是一条props消息"
        school="尚硅谷"
        @hello="showHelloMsg"
  >
    <template v-slot:qwe>
      <span><b>尚硅谷</b> 我是具名插槽</span>
    </template>

    <template>
      <h3>我是默认插槽！</h3>
    </template>
  </Demo>
</template>

<script>
// 引入ref 函数
import Demo from "./components/Demo";

export default {
  name: 'App',
  components: {
    Demo,
  },
  setup() {
    function showHelloMsg(value) {
      console.log(`你好啊，我是App组件，你触发了hello事件，我收到了参数是：${value}!`);
    }

    return {
      showHelloMsg,
    }
  }
}
</script>

<style>

</style>
